<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 发布预约</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        /* 选中样式 */
        .service-item.active .service-icon {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            color: white;
        }
        
        .service-item.active .service-name {
            color: #a742df;
            font-weight: bold;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen">
    <!-- 顶部导航 -->
    <header class="fixed top-0 left-0 right-0 z-20 max-w-md mx-auto">
        <div class="gradient-bg px-4 py-3 text-white shadow-lg">
            <div class="flex items-center">
                <button class="w-8 h-8 flex items-center justify-center" onclick="window.history.back()">
                    <i class="fa-solid fa-arrow-left"></i>
                </button>
                <div class="ml-3 flex-1 text-lg font-medium">发布预约</div>
            </div>
        </div>
    </header>
    
    <!-- 页面内容区 -->
    <main class="pt-16 pb-24 px-4">
        <!-- 服务类型选择 -->
        <div class="bg-white rounded-xl shadow-sm mb-4">
            <div class="p-4 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                    <h2 class="text-lg font-bold">选择服务类型</h2>
                </div>
            </div>
            <div class="grid grid-cols-4 gap-2 p-4">
                <div class="service-item active flex flex-col items-center">
                    <div class="w-14 h-14 rounded-full service-icon gradient-bg flex items-center justify-center mb-2">
                        <i class="fa-solid fa-music text-white text-xl"></i>
                    </div>
                    <span class="service-name text-xs">舞蹈</span>
                </div>
                <div class="service-item flex flex-col items-center">
                    <div class="w-14 h-14 rounded-full service-icon bg-gray-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-dumbbell text-gray-500 text-xl"></i>
                    </div>
                    <span class="service-name text-xs text-gray-500">健身</span>
                </div>
                <div class="service-item flex flex-col items-center">
                    <div class="w-14 h-14 rounded-full service-icon bg-gray-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-spa text-gray-500 text-xl"></i>
                    </div>
                    <span class="service-name text-xs text-gray-500">瑜伽</span>
                </div>
                <div class="service-item flex flex-col items-center">
                    <div class="w-14 h-14 rounded-full service-icon bg-gray-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-hand-holding-heart text-gray-500 text-xl"></i>
                    </div>
                    <span class="service-name text-xs text-gray-500">疗愈</span>
                </div>
                <div class="service-item flex flex-col items-center">
                    <div class="w-14 h-14 rounded-full service-icon bg-gray-100 flex items-center justify-center mb-2">
                        <i class="fa-solid fa-golf-ball-tee text-gray-500 text-xl"></i>
                    </div>
                    <span class="service-name text-xs text-gray-500">高尔夫</span>
                </div>
            </div>
        </div>
        
        <!-- 日期时间选择 -->
        <div class="bg-white rounded-xl shadow-sm mb-4">
            <div class="p-4 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                    <h2 class="text-lg font-bold">选择日期和时间</h2>
                </div>
            </div>
            
            <!-- 日期选择 -->
            <div class="px-4 pt-4">
                <div class="text-sm font-medium mb-2">日期</div>
                <div class="flex overflow-x-auto no-scrollbar pb-2">
                    <div class="flex-shrink-0 w-16 mr-3 rounded-lg gradient-bg text-white py-2.5 px-3 text-center">
                        <div class="text-lg font-bold">15</div>
                        <div class="text-xs">周一</div>
                    </div>
                    <div class="flex-shrink-0 w-16 mr-3 rounded-lg bg-gray-100 text-gray-700 py-2.5 px-3 text-center">
                        <div class="text-lg">16</div>
                        <div class="text-xs text-gray-500">周二</div>
                    </div>
                    <div class="flex-shrink-0 w-16 mr-3 rounded-lg bg-gray-100 text-gray-700 py-2.5 px-3 text-center">
                        <div class="text-lg">17</div>
                        <div class="text-xs text-gray-500">周三</div>
                    </div>
                    <div class="flex-shrink-0 w-16 mr-3 rounded-lg bg-gray-100 text-gray-700 py-2.5 px-3 text-center">
                        <div class="text-lg">18</div>
                        <div class="text-xs text-gray-500">周四</div>
                    </div>
                    <div class="flex-shrink-0 w-16 mr-3 rounded-lg bg-gray-100 text-gray-700 py-2.5 px-3 text-center">
                        <div class="text-lg">19</div>
                        <div class="text-xs text-gray-500">周五</div>
                    </div>
                    <div class="flex-shrink-0 w-16 mr-3 rounded-lg bg-gray-100 text-gray-700 py-2.5 px-3 text-center">
                        <div class="text-lg">20</div>
                        <div class="text-xs text-gray-500">周六</div>
                    </div>
                </div>
            </div>
            
            <!-- 时间选择 -->
            <div class="p-4">
                <div class="text-sm font-medium mb-2">时间</div>
                <div class="grid grid-cols-3 gap-3">
                    <div class="bg-gray-100 rounded-lg text-center py-2 gradient-bg text-white">
                        <span>09:00-10:00</span>
                    </div>
                    <div class="bg-gray-100 rounded-lg text-center py-2">
                        <span>10:00-11:00</span>
                    </div>
                    <div class="bg-gray-100 rounded-lg text-center py-2">
                        <span>11:00-12:00</span>
                    </div>
                    <div class="bg-gray-100 rounded-lg text-center py-2">
                        <span>14:00-15:00</span>
                    </div>
                    <div class="bg-gray-100 rounded-lg text-center py-2">
                        <span>15:00-16:00</span>
                    </div>
                    <div class="bg-gray-100 rounded-lg text-center py-2">
                        <span>16:00-17:00</span>
                    </div>
                    <div class="bg-gray-100 rounded-lg text-center py-2">
                        <span>17:00-18:00</span>
                    </div>
                    <div class="bg-gray-100 rounded-lg text-center py-2">
                        <span>18:00-19:00</span>
                    </div>
                    <div class="bg-gray-100 rounded-lg text-center py-2">
                        <span>19:00-20:00</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 课程类型和需求 -->
        <div class="bg-white rounded-xl shadow-sm mb-4">
            <div class="p-4 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                    <h2 class="text-lg font-bold">课程信息</h2>
                </div>
            </div>
            
            <div class="p-4">
                <!-- 舞蹈类型选择 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">舞蹈类型</label>
                    <div class="grid grid-cols-2 gap-3">
                        <div class="bg-gray-100 rounded-lg text-center py-2 gradient-bg text-white">
                            <span>Jazz</span>
                        </div>
                        <div class="bg-gray-100 rounded-lg text-center py-2">
                            <span>Hiphop</span>
                        </div>
                        <div class="bg-gray-100 rounded-lg text-center py-2">
                            <span>编舞</span>
                        </div>
                        <div class="bg-gray-100 rounded-lg text-center py-2">
                            <span>古典舞</span>
                        </div>
                        <div class="bg-gray-100 rounded-lg text-center py-2">
                            <span>现代舞</span>
                        </div>
                        <div class="bg-gray-100 rounded-lg text-center py-2">
                            <span>Kpop男团</span>
                        </div>
                        <div class="bg-gray-100 rounded-lg text-center py-2">
                            <span>Kpop女团</span>
                        </div>
                        <div class="bg-gray-100 rounded-lg text-center py-2">
                            <span>港风Jazz</span>
                        </div>
                        <div class="bg-gray-100 rounded-lg text-center py-2">
                            <span>国风Jazz</span>
                        </div>
                    </div>
                </div>
                
                <!-- 难度级别 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">难度级别</label>
                    <div class="grid grid-cols-3 gap-3">
                        <div class="bg-gray-100 rounded-lg text-center py-2">
                            <span>入门</span>
                        </div>
                        <div class="bg-gray-100 rounded-lg text-center py-2 gradient-bg text-white">
                            <span>初级</span>
                        </div>
                        <div class="bg-gray-100 rounded-lg text-center py-2">
                            <span>中级</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 场地信息 -->
        <div class="bg-white rounded-xl shadow-sm mb-4">
            <div class="p-4 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                    <h2 class="text-lg font-bold">场地信息</h2>
                </div>
            </div>
            
            <div class="p-4">
                <div class="space-y-3">
                    <div class="flex items-center p-3 bg-purple-50 rounded-lg border border-primary-dark">
                        <i class="fa-solid fa-location-dot text-primary-dark mr-3"></i>
                        <div class="flex-1">
                            <h4 class="text-sm font-medium">和谐瑜伽馆（朝阳区望京SOHO T1店）</h4>
                            <p class="text-xs text-gray-500 mt-1">北京市朝阳区望京SOHO T1 B座 2层208室</p>
                            <div class="text-primary-dark text-xs font-medium mt-1">¥100/小时</div>
                        </div>
                        <i class="fa-solid fa-check text-primary-dark"></i>
                    </div>
                    
                    <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200">
                        <i class="fa-solid fa-location-dot text-gray-400 mr-3"></i>
                        <div class="flex-1">
                            <h4 class="text-sm font-medium">舞动人生健身中心（朝阳大悦城店）</h4>
                            <p class="text-xs text-gray-500 mt-1">北京市朝阳区朝阳北路大悦城7层</p>
                            <div class="text-gray-500 text-xs font-medium mt-1">¥120/小时</div>
                        </div>
                    </div>
                    
                    <div class="flex items-center p-3 bg-white rounded-lg border border-gray-200">
                        <i class="fa-solid fa-location-dot text-gray-400 mr-3"></i>
                        <div class="flex-1">
                            <h4 class="text-sm font-medium">活力健身工作室（三里屯店）</h4>
                            <p class="text-xs text-gray-500 mt-1">北京市朝阳区三里屯太古里北区N8号楼</p>
                            <div class="text-gray-500 text-xs font-medium mt-1">¥150/小时</div>
                        </div>
                    </div>
                    
                    <div class="flex items-start p-3 bg-white rounded-lg border border-gray-200">
                        <i class="fa-solid fa-location-dot text-gray-400 mr-3 mt-2"></i>
                        <div class="flex-1">
                            <h4 class="text-sm font-medium mb-2">自定义地点</h4>
                            <div class="relative">
                                <input type="text" placeholder="输入详细地址" class="w-full border border-gray-200 rounded-lg p-2 text-sm pr-8">
                                <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-primary-dark">
                                    <i class="fa-solid fa-map-marker-alt"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 其他需求 -->
        <div class="bg-white rounded-xl shadow-sm mb-4">
            <div class="p-4 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                    <h2 class="text-lg font-bold">其他需求</h2>
                </div>
            </div>
            
            <div class="p-4">
                <textarea class="w-full border border-gray-200 rounded-lg p-3 min-h-[100px] text-sm" placeholder="请描述您的具体需求，如教练要求、特殊安排等..."></textarea>
            </div>
        </div>
        
        <!-- 联系方式 -->
        <div class="bg-white rounded-xl shadow-sm mb-4">
            <div class="p-4 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                    <h2 class="text-lg font-bold">联系方式</h2>
                </div>
            </div>
            
            <div class="p-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium mb-2">联系人</label>
                    <input type="text" class="w-full border border-gray-200 rounded-lg p-3 text-sm" placeholder="请输入姓名">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-2">联系电话</label>
                    <input type="tel" class="w-full border border-gray-200 rounded-lg p-3 text-sm" placeholder="请输入手机号码">
                </div>
            </div>
        </div>

        <!-- 价格设置 -->
        <div class="bg-white rounded-xl shadow-sm mb-4">
            <div class="p-4 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-dark to-primary-light rounded-full mr-2"></div>
                    <h2 class="text-lg font-bold">价格设置</h2>
                </div>
            </div>
            
            <div class="p-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium mb-2">自定义价格</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">¥</span>
                        <input type="number" min="100" class="w-full border border-gray-200 rounded-lg p-3 pl-8 text-sm" placeholder="请输入价格（不得低于场地单价）" 
                               oninput="checkPrice(this)" onblur="validatePrice(this)">
                    </div>
                    <p id="price-warning" class="text-xs text-red-500 mt-1 hidden">价格不得低于所选场地的单价</p>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-2">价格说明</label>
                    <div class="bg-gray-50 rounded-lg p-3 text-sm text-gray-600">
                        <p class="mb-1">• 价格为单次课程费用，包含教练指导费用</p>
                        <p class="mb-1">• 场地费用已包含在内，无需额外支付</p>
                        <p class="mb-1">• 如需额外服务或特殊安排，可能产生附加费用</p>
                        <p>• 平台将收取10%服务费，已计入显示价格</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 底部提交按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-3 flex items-center justify-between max-w-md mx-auto z-10">
        <div class="font-bold text-xl text-primary-dark">¥<span id="display-price">200.00</span></div>
        <button class="gradient-bg text-white rounded-full px-10 py-2.5 text-base font-medium">
            提交预约
        </button>
    </div>

    <script>
        // 获取当前选中的场地价格
        function getSelectedVenuePrice() {
            // 检查哪个场地被选中
            const selectedVenue = document.querySelector('.bg-purple-50.border-primary-dark');
            if (!selectedVenue) return 0;
            
            // 获取价格文本并提取数字
            const priceText = selectedVenue.querySelector('.text-primary-dark.text-xs.font-medium').innerText;
            const priceMatch = priceText.match(/¥(\d+)/);
            return priceMatch ? parseInt(priceMatch[1]) : 0;
        }
        
        // 检查输入的价格
        function checkPrice(input) {
            const warning = document.getElementById('price-warning');
            const venuePrice = getSelectedVenuePrice();
            const userPrice = parseInt(input.value) || 0;
            
            // 更新显示价格
            document.getElementById('display-price').innerText = userPrice.toFixed(2);
            
            // 如果场地不是自定义的，价格需要≥场地价格
            const isCustomVenue = document.querySelector('.bg-purple-50.border-primary-dark h4').innerText === '自定义地点';
            
            if (!isCustomVenue && userPrice < venuePrice && userPrice > 0) {
                warning.classList.remove('hidden');
                input.classList.add('border-red-500');
            } else {
                warning.classList.add('hidden');
                input.classList.remove('border-red-500');
            }
        }
        
        // 失去焦点时验证价格
        function validatePrice(input) {
            const venuePrice = getSelectedVenuePrice();
            const isCustomVenue = document.querySelector('.bg-purple-50.border-primary-dark h4').innerText === '自定义地点';
            
            // 如果不是自定义场地且价格低于场地价格，自动修正
            if (!isCustomVenue && parseInt(input.value) < venuePrice) {
                input.value = venuePrice;
                document.getElementById('display-price').innerText = venuePrice.toFixed(2);
                document.getElementById('price-warning').classList.add('hidden');
                input.classList.remove('border-red-500');
            }
        }
    </script>
</body>
</html> 